<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>2018 wildfires</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>
		<link
			href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css"
			rel="stylesheet"
		/>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}

			.mapboxgl-ctrl.legend {
				padding: 1em;
				background-color: white;
				border-radius: 0.5px;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>

		<script type="module">
			import Ulysses from "./ulysses/index.esm.js";
			import keys from "./ulysses/plugins/keys.mjs";
			import Legend from "./legend.js";

			mapboxgl.accessToken =
				"pk.eyJ1IjoidXNhdG9kYXlncmFwaGljcyIsImEiOiJ0S3BGdndrIn0.5juF5LWz_GRcndian32tZA";

			const map = (window.map = new mapboxgl.Map({
				container: "map", // container id
				style: "mapbox://styles/chrisamico/cjpwpqryr121e2rkbnxyna4rq", // fires 2018
			}));

			const legend = new Legend()
				.addTo(map, "top-left")
				.setContent(
					`<p>Use left/right arrow keys to see the 10 largest fires of 2018</p>`
				);

			const story = (window.story = new Ulysses({ map, steps: [], plugins: [keys()] }));

			story.on("step", e => {
				const p = e.feature.properties;

				legend.setContent(`<h3>${p.incidentna}</h3>
				<p><strong>Area burned</strong>: ${p.gisacres.toLocaleString()} acres</p>`);
			});

			fetch("./data/fires-2018.json")
				.then(r => r.json())
				.then(fires => {
					story.steps = fires;
					//story.next();
				});
		</script>
	</body>
</html>
